<template>
  <div class="home">
<!--    上边的两个盒子-->
    <div class="Box topBox">
      <!--      网站概况-->
      <div class="leftBox box">
        <webGeneral/>
      </div>
      <!--      待审核-->
      <div class="rightBox box">
        <waitChecked/>
      </div>
    </div>
<!--    下边的两个盒子-->
    <div class="Box bottomBox">
      <!--      趋势图-->
      <div class="leftBox box" id="myChart"></div>
      <!--        在线用户-->
      <div class="rightBox box" >
        <userLiving/>
      </div>
    </div>
  </div>
</template>

<script>
  import '../../assets/css/icon/iconfont.css'
  import webGeneral from '../modules/verify/webGeneral'
  import waitChecked from '../modules/verify/waitCheck'
  import userLiving from '../modules/verify/userLiving'

  export default {
    name: "home",
    components:{
      webGeneral,
      waitChecked,
      userLiving
    },

    mounted() {
      this.drawLine();
    },
    data(){
      return{
        mouth
      }
    },
    methods: {
      drawLine(){
        this.$http({
          url: this.$http.adornUrl('/generator/home/getTendency'),
          method: 'get',
        }).then((res) => {
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById('myChart'))
          // 绘制图表
          myChart.setOption({
            title: {
              text: '下载量趋势',
              subtext:res.data.data.months,
              textStyle:{
                fontSize:20
              },
              subtextStyle:{
                fontSize:18
              },
              itemGap: 420,
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['软件下载数','软件上传数']
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: res.data.data.dates
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '软件下载数',
                type: 'line',
                stack: '总量',
                data: res.data.data.downloads
              },
              {
                name: '软件上传数',
                type: 'line',
                stack: '总量',
                data: res.data.data.publishes
              }
            ]
          });
        })
      }
    }
  }
</script>

<style scoped>
  .Box{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .topBox{
    height: 200px;
    margin-bottom: 30px;
  }
  .box{
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 30px;
  }
  .box>p{
    margin-bottom: 15px;
  }
  .leftBox {
    width: 60%;
    margin-right: 30px;
    min-width: 875px;
  }
  .rightBox{
    width: 40%;
    min-width: 600px;
  }

  .backlog{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .backlogBox{
    width: 33%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15px 0 55px;
    cursor: pointer;
  }
  .backlogBox p:first-child {
    font-size: 16px;
    color: #666;
    margin-bottom: 15px;
  }
  .backlogBox p:last-child {
    font-size: 30px;
    color: #333;
  }
  .backlog .backlogBox:first-child{
    margin-left: 100px;
  }
  .bottomBox{
    height: 558px;
  }
  .leftBox{
    width: 60%;
    margin-right: 30px;
    min-width: 875px;
  }
  .rightBox{
    width: 40%;
    min-width: 600px;
  }
  .rightBox>.font>span:nth-child(3){
    margin-left: 6px;
    font-size: 14px!important;
    color: #333;
  }

</style>
